<template>
	<view class="main">
		<view class="nav-all" style="padding-top:80rpx;">
			<view class="nav">
				<image @click="goBack" class="back" :src="$img('/static/pages/back.png')"></image>
				<view class="nav-text">发布活动</view>
				<!-- <image class="issue" :src="$img('/static/pages/issue.png')" @click="fabu"></image> -->
				<view class="issue yaoqingaaa" @click="fabu">
					发布
				</view>
			</view>
		</view>
		<view class="blank"></view>
		<view class="sort">
			<view class="sort-text">活动类别</view>
			<view class="sort-sel">
				<view v-for="(item,index) in typeList" :key="index" @click="chooseType(item.id)"
					:class="[typeId == item.id?'sort-list':'',]">
					<image class="crType" :src="item.image"></image>
					<view class="sort-type">
						{{item.activity_type_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="describe">
			<view class="describe-top">
				<view class="sort-text">活动描述</view>
				<view>
					<!-- <image class="describe-img" :src="$img('/static/pages/model.png')"></image> -->
					<view class="describe-img yaoqingaaa-border">
						模板示例
					</view>
				</view>
			</view>
			<view class="textarea">
				<span class="mark">{{textareaValue.length}}/40</span>
				<textarea class="textarea1" placeholder="· 請簡約描述你期望的活動內容· 請勿發佈低俗，色情教育內容。綠色健康邀約· 請勿發佈廣告內容" maxlength="40"
					v-model="textareaValue" minlength="2" auto-focus></textarea>

			</view>

			<view class="price">

				<view class="left">
					费用
				</view>
				<view class="right">
					<view class="left" @tap="selectObj.payType.change_boxShow(!selectObj.payType.boxShow)">
						{{selectObj.payType.select}}
						<image class="xia" :src="$img('/static/2021-08-30/xia.png')" mode="widthFix"></image>
						<view class="select-box" v-show="selectObj.payType.boxShow">
							<view class="item" v-for="i,j in selectObj.payType.list"
								@tap.stop="selectObj.payType.change_select(i)"
								:class="{'select-item':i == selectObj.payType.select}">
								{{i}}
							</view>
						</view>
					</view>
					<view class="right" @tap="selectObj.price.change_boxShow(!selectObj.price.boxShow)">
						{{selectObj.price.select}}
						<image class="xia" :src="$img('/static/2021-08-30/xia.png')" mode="widthFix"></image>
						<view class="select-box" v-show="selectObj.price.boxShow">
							<view class="item" v-for="i,j in selectObj.price.list"
								@tap.stop="selectObj.price.change_select(i)"
								:class="{'select-item':i == selectObj.price.select}">
								{{i}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="object">
				<view class="left">
					对象
				</view>
				<view class="right" @tap="selectObj.object.change_boxShow(!selectObj.object.boxShow)">
					{{selectObj.object.select}}
					<image class="xia" :src="$img('/static/2021-08-30/xia.png')" mode="widthFix"></image>
					<view class="select-box" v-show="selectObj.object.boxShow">
						<view class="item" v-for="i,j in selectObj.object.list"
							@tap.stop="selectObj.object.change_select(i)"
							:class="{'select-item':i == selectObj.object.select}">
							{{i}}
						</view>
					</view>
				</view>
			</view>

			<view class="describe-top" v-if="false">
				<view class="sort-text">活动奖励</view>
			</view>
			<view class="textarea" v-if="false">
				<span class="mark">{{textareaValue.length}}/40</span>
				<textarea class="textarea2" placeholder="· 请简约描述你给他(她)的奖励" maxlength="40" v-model="textareaValue2"
					minlength="2" auto-focus></textarea>
			</view>
			<view>
				<!-- <image class="photo" src="../../static/pages/upload.png"></image> -->
				<imgUpload :count="count" :img_list="img_list" @obtain_img="obtain_img" :name="name" :header="header"
					:url="url"></imgUpload>
			</view>
			<view class="buttom">· 必填，图片至少1张，最多不超过3张</view>
			<view class="buttom" style="margin-top: 10rpx;">· 建议第一张放真人照片，大胆展示自己，让人更想邀你</view>
			<view class="flexItem ">
				<view class="flexItemMain ">
					<image class="flexItemLeftImg" :src="$img('/static/pages/address.png')" mode=""></image>
					<view class="flexItemCenter">
						{{address}}
					</view>
					<image :src="$img('/static/pages/int.png')" class="flexItemRightImg" mode=""></image>
				</view>
			</view>
		</view>
		<view>
		</view>
	</view>
</template>

<script>
	import imgUpload from '../../components/linzq-imgUpload/linzq-imgUpload.vue'
	let $vue;
	export default {
		data() {
			return {
				typeList: [],
				img_list: [],
				count: 3,
				name: '', //必填
				url: 'https://sx.hualin688.com/api/upload', //必填
				header: {},
				textareaValue: '',
				textareaValue2: '',
				typeId: 1,
				address: '正在定位',
				locationInfo: '',
				isProceed: false,

				selectObj: {
					payType: {
						list: [],
						select: "",
						boxShow: false,
						change_select(val) {
							this.select = val;
							this.change_boxShow(false);
						},
						change_boxShow(bol) {
							// console.log("显示?")
							this.boxShow = bol;
						}
					},
					object: {
						list: [],
						select: "",
						boxShow: false,
						change_select(val) {
							this.select = val;
							this.change_boxShow(false);
						},
						change_boxShow(bol) {
							// console.log("显示?")
							this.boxShow = bol;
						}
					},
					price:{
						list: [],
						select: "",
						boxShow: false,
						change_select(val) {
							this.select = val;
							this.change_boxShow(false);
						},
						change_boxShow(bol) {
							// console.log("显示?")
							this.boxShow = bol;
						}
					},
					get_data() {
						$vue.$utils.request('/api/activitycost', {}, res => {
							this.payType.list = res.data;
							this.payType.select = res.data[0];
						})
						$vue.$utils.request('/api/activityobject', {}, res => {
							this.object.list = res.data;
							this.object.select = res.data[0];
						})
						
						for(let i=0;i<=10000;i=i+100){
							this.price.list = [...this.price.list,i];
						}
						this.price.select = 1000;
						
					}
				}
			}
		},
		components: {
			imgUpload
		},
		onShow() {
			$vue = this;
			this.selectObj.get_data();
			let typeId = uni.getStorageSync('active_type')
			if (typeId) {
				setTimeout(() => {
					this.typeId = typeId
				}, 300)
			}
			this.getTypeList()
			this.locationInfo = uni.getStorageSync('locationInfo')
			if (this.locationInfo) {
				this.address = this.locationInfo.address
			} else {
				uni.showToast({
					icon: 'none',
					title: '请先获取定位'
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('active_type')
		},
		methods: {
			get_price_data() {
				this.$utils.request('/api/activitycost', {}, res => {

				})
			},
			chooseType(id) {
				this.typeId = id
				uni.setStorageSync('active_type', id)
			},
			fabu() {
				if (this.isProceed) {
					return
				}
				this.isProceed = true
				let that = this
				let paramData = {
					activity_type_id: this.typeId,
					content: this.textareaValue,
					image: JSON.stringify(this.img_list),
					longitude: this.locationInfo.longitude,
					latitude: this.locationInfo.latitude,
					activity_reward: this.textareaValue2,
					
					cost_price:this.selectObj.price.select,
					cost_value:this.selectObj.payType.select,
					object_value:this.selectObj.object.select,
				}
				// console.log(paramData)
				this.$utils.postrequest("/api/activit/add", paramData, function(res) {
					// console.log('res', res)
					if (res.code == 200) {
						that.$utils.showLayer('发布成功')
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800)

					} else {
						that.isProceed = false;
						that.$utils.showLayer(res.message)
					}
				})
			},
			obtain_img(data) {
				// console.log(data, "获取到的图片组" + data.length + "张")
				this.img_list = data
			},
			getTypeList() {
				let that = this
				this.$utils.request("/api/activitytype", {}, function(res) {
					// console.log('res', res)
					if (res.code == 200) {
						if (res.data.length > 0) {
							that.typeList = res.data
							that.typeId = res.data[0].id
							// console.log('that.ty', that.typeList)
						}

					}
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./active.scss";

	page {
		background: #FFFFFF;
		padding-top: 0 !important;
	}

	.main {
		background: #fff;
		width: 100%;
		/* height: 195rpx; */
		margin-top: -70rpx;
		padding-bottom: 70rpx;
	}

	.nav {
		display: flex;
		flex-wrap: wrap;
		padding: 109rpx 31rpx 0rpx 31rpx;
	}

	.back {
		margin-top: 12rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.nav-text {
		font-size: 32rpx;
		margin: 12rpx 0rpx 0rpx 230rpx;
	}

	.crType {
		height: 115rpx;
		width: 115rpx;
		color: #007AFF;
	}

	.issue {
		margin-left: 159rpx;
		width: 135rpx;
		height: 62rpx;
	}

	.blank {
		margin-top: 25rpx;
		background: #E2E0EB;
		width: 100%;
		height: 3rpx;
	}

	.sort {
		position: relative;
		width: 697rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 28rpx 0rpx 0rpx 28rpx;
		display: inline-block;
		padding-bottom: 20rpx;
	}

	.sort-text {
		height: 60rpx;
		margin: 43rpx 0rpx 0rpx 37rpx;
		font-size: 30rpx;
		font-family: PingFang SC;

		color: #1A1A1A;
		line-height: 19rpx;
	}

	.sort-type {
		width: 115rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
	}

	.sort-sel {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: space-between;
		padding: 30rpx;
	}

	.sort-list {
		width: 115rpx;
		height: 115rpx;
		color: #007AFF;
	}

	.describe {
		margin: 21rpx 0rpx 0rpx 23rpx;
		width: 706rpx;
		height: 771rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: inline-block;
	}

	.describe-top {
		display: flex;
		flex-wrap: wrap;
	}

	.describe-img {
		margin: 20rpx 0rpx 0rpx 385rpx;
		width: 133rpx;
		height: 60rpx;
	}

	.textarea {
		margin: 0 auto;
		width: 643rpx;
		/* height: 270rpx; */
		/* margin: 15rpx 0rpx 0rpx 30rpx; */
		background: #F6F7F9;
		border: 1px solid #E5E7E5;
		border-radius: 10rpx;
		position: relative;
	}

	.textarea1 {
		height: 272rpx;
	}

	.textarea2 {
		height: 135rpx;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
	}

	textarea {
		width: 100%;
		/* margin: 38rpx 0rpx 0rpx 40rpx; */
		padding: 48rpx 50rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: PingFang SC;

		color: #C8C9CB;
		line-height: 40rpx;
	}

	.mark {
		position: absolute;
		font-size: 20rpx;
		font-family: PingFang SC;

		color: #B7B4C8;
		line-height: 30rpx;
		bottom: 16rpx;
		right: 44rpx;
	}

	.photo {
		width: 204rpx;
		height: 205rpx;
		margin: 30rpx 0rpx 0rpx 36rpx;
	}

	.buttom {
		margin: 31rpx 0rpx 0rpx 37rpx;
		font-size: 22rpx;
		font-family: PingFang SC;

		color: #B1B0B9;
		line-height: 30rpx;
	}

	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 38rpx 0;
	}

	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}

	.flexItemLeftImg {
		width: 30rpx;
		height: 30rpx;
		flex: none;
		margin-right: 12rpx;
		margin-left: 30rpx;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;

		color: #AFAFBB;
		line-height: 19rpx;
	}

	.flexItemRightImg {
		width: 21rpx;
		height: 21rpx;
		flex: none;
		margin-right: 25rpx;
		/* margin-left: 30rpx; */
	}

	.flexItemXian {
		margin-right: 48rpx;
		margin-left: 48rpx;
		height: 1rpx;
		background: #F6F8F7;
	}

	.yaoqingaaa {
		background-color: rgba(23, 162, 249, 1);
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100rpx;
	}

	.yaoqingaaa-border {
		/* background-color:rgba(23, 162, 249, 1); */
		color: rgba(23, 162, 249, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100rpx;
		padding: 0rpx 10rpx;
		border: 2rpx solid rgba(23, 162, 249, 1);
		font-size: 20rpx;
	}
</style>
